<template>
    <div class="main member-upgrade">
        <section>
            <el-form :model="formData" :rules="formRules" ref="form" label-width="160px">
                <el-form-item label="新密码：" prop="newPassword">
                    <el-input type="password" v-model="formData.newPassword" size="small" placeholder="新密码" style="max-width: 360px"></el-input>
                </el-form-item>
                <el-form-item label="确认新密码：" prop="newAckPassword">
                    <el-input type="password" v-model="formData.newAckPassword" size="small" placeholder="确认新密码" style="max-width: 360px"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small" @click="modifyPassword" :disabled="btnDisabled">确定</el-button>
                </el-form-item>
            </el-form>
        </section>
    </div>
</template>
<script>
  import {regexp} from '../../../utils/tools'
  export default {
    name: 'passwordModify',
    data(){
      const passwordRule = {
        pattern: regexp.password,
        message: '密码6-20个大小写字母或数字',
        trigger: 'change'
      };
      return {
        formData: {
          newPassword: '',
          newAckPassword: ''
        },
        formRules: {
          newPassword: [
            {required: true, message: '不能为空', trigger: 'blur'},
            passwordRule
          ],
          newAckPassword: [
            {required: true, message: '不能为空', trigger: 'blur'},
            passwordRule,
            {
              validator: (rule, value, callback) => {
                if (!value) {
                  return callback();
                }
                if (value !== this.formData.newPassword) {
                  return callback(new Error('两次输入的密码不相同'));
                }
                callback();
              },
              trigger: 'change'
            }
          ]
        },
        btnDisabled: false
      }
    },
    methods: {
      modifyPassword(){
        this.$refs.form.validate(valid => {
          if (!valid) {
            return false;
          }

          this.btnDisabled = true;
          this.request({
            url: `/bsnl-authority/user/change/password`,
            method: 'post',
            data: this.formData
          }).then(() => {
            this.btnDisabled = false;
            this.$message.success('修改密码成功');
            this.formData = {
              newPassword: '',
              newAckPassword: ''
            }
          }).catch(err => {
            this.btnDisabled = false;
          });
        });
      }
    }
  }
</script>
